 <template>
  <Container >
    <div class="container-header" slot="header">
      <Form class="search group" v-if="tab=='tab1'">
        <Row>
          <Col span="6">
            <FormItem label="科室">
              <Select v-model="list.pageData.form.officeId" clearable filterable @on-change="setBranchTab">
                <Option v-for="(item, index) of reportDepart" :value="item" :key="index">{{item.name}}</Option>
              </Select>
            </FormItem>
            <FormItem label="冲账编号">
              <Input v-model="list.pageData.form.rushAccountNumber"/>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="部门">
              <Select v-model="list.pageData.form.departmentId" clearable filterable @on-change="setDistributeTab">
                <Option v-for="(item, index) of list.pageData.branch" :key="index" :value="item.id">{{item.name}}</Option>
              </Select>
            </FormItem>
            <FormItem label="维护人">
              <Select v-model="list.pageData.form.creatorId" clearable filterable @on-change="getData">
                <Option v-for="(item, index) of reportFlowCreatorList" :key="index" :value="item.creatorId">{{item.creator}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="5">
            <FormItem label="经销商">
              <Select v-model="list.pageData.form.distributorId" multiple clearable filterable @on-change="getData">
                <Option v-for="(item) of list.pageData.distributor" :key="item.distributorId" :value="item.distributorId">{{item.distributorName}}</Option>
              </Select>
            </FormItem>
            <FormItem label="返利类型">
              <Select multiple v-model="list.pageData.form.rebateTypeNos" clearable @on-change="getData">
                <Option v-for="(item, index) of reportFlowTypeList" :key="index" :value="item.rebateTypeNo">{{item.rebateTypeName}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="5">
            <FormItem label="返利月份">
              <DatePicker
                v-model="list.pageData.form.yearMonth"
                format="yyyy-MM" 
                type="month" 
                placement="bottom-start"
                placeholder="选择日期"
                @on-enter="getData"></DatePicker>
            </FormItem>
          </Col>
          <Col span="2" class="search">
            <FormItem>
              <Button class="btn-search large" type="primary" icon="ios-search" @click="getData"></Button>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <Form class="search group" v-else-if="tab=='tab2'">
        <Row>
          <Col span="7">
            <FormItem label="科室">
              <Select v-model="list.pageData1.form.officeId" clearable filterable @on-change="setBranch">
                <Option v-for="(item, index) of reportDepart" :value="item" :key="index">{{item.name}}</Option>
              </Select>
            </FormItem>
            <FormItem label="返利类型">
              <Select multiple v-model="list.pageData1.form.rebateTypeNos" clearable @on-change="getFlowData">
                <Option v-for="(item, index) of reportFlowTypeList" :key="index" :value="item.rebateTypeNo">{{item.rebateTypeName}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="7">
            <FormItem label="部门">
              <Select v-model="list.pageData1.form.departmentId" clearable filterable @on-change="setDistribute">
                <Option v-for="(item, index) of list.pageData1.branch" :key="index" :value="item.id">{{item.name}}</Option>
              </Select>
            </FormItem>
            <FormItem label="返利年份">
              <DatePicker
                v-model="list.pageData1.form.year"
                format="yyyy"
                type="year"
                placement="bottom-start"
                placeholder="选择日期"
                @on-enter="getFlowData"></DatePicker>
            </FormItem>
          </Col>
          <Col span="7">
            <FormItem label="经销商">
              <Select multiple v-model="list.pageData1.form.distributorId" clearable filterable>
                <Option v-for="(item) of list.pageData1.distributor" :key="item.distributorId" :value="item.distributorId">{{item.distributorName}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="2" class="search">
            <FormItem>
              <Button class="btn-search large" type="primary" icon="ios-search" @click="getFlowData"></Button>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </div>
    <Tabs v-model="tab">
      <div slot="extra" v-if="tab =='tab1'">
        <export-btn 
          :param="exportParam" 
          url='/distributor/rebate/flow/export_rebate_flow' 
          class="item"></export-btn>
        <Button type="primary" @click="onImport" size="large" class="item">导入</Button>
        <Button type="primary" @click="onRebate" size="large" class="item">维护返利类型</Button>
      </div>
      <TabPane label="经销商返利流水" name="tab1">
        <Table
        :height="options.tableHeight"
        ref="selection" stripe
        :columns="list.pageData.columns" 
        :data="list.pageData.data">
        </Table>
        <PageItem
          @complete="getData" 
          :totalItem="list.pageData.total"
          :currentPage="list.pageData.current">
        </PageItem>
      </TabPane>
      <TabPane label="经销商返利汇总" name="tab2">
        <Table
        :height="options.tableHeight"
        ref="selection" stripe
        :columns="list.pageData1.columns"
        :data="list.pageData1.data">
        </Table>
        <PageItem1
          @complete="getFlowData" 
          :totalItem="list.pageData1.total"
          :currentPage="list.pageData1.current">
        </PageItem1>
      </TabPane>
    </Tabs>
    <Import 
      ref="importShip" 
      @complete="getData"
      title="经销商返利流水导入" 
      templateUrl="NpipmBnev.xls"
      url="/api/taiyi/distributor/rebate/flow/importRebateFlow"></Import>
    <RebatetItem ref="rebate"></RebatetItem>
    <Loader :status="list.pageData.status" @refresh="getData"></Loader>
    <Loader :status="list.pageData1.status" @refresh="getFlowData"></Loader>
  </Container>
</template>
<script>
import listData from './list/RebateFlowListData'
import Import from '@/components/Import'
import table from '@/table'
import PageItem from './edit/PageItem'
import PageItem1 from './edit/PageItem'
import RebatetItem from './edit/RebatetItem'
import { mapGetters } from 'vuex'
import { clearEmpty, formatMonth } from '@/util'
export default {
  name: 'report/dealerreceipt/list',
  components: {
    PageItem,
    PageItem1,
    Import,
    RebatetItem
  },
  data() {
    return {
      tab: "tab1",
      list: listData,
      options: {
        tableHeight: 300
      }
    };
  },
  mounted() {
    // this.setYear();
    this.getData()
    this.getFlowData()
    this.initTable()
    this.$bus.$on("onPatrolDetail", this.onPatrolDetail);
    this.getInitCondition()
  },
  methods: {
    ...table,
    getData(p) {
      if (p && p.type == 'current') this.list.pageData.current = p.val
      if (p && p.type == 'size') this.list.pageData.size = p.val
      this.list.pageData.loading = true;
      let params = {
        current: this.list.pageData.current,
        size: this.list.pageData.size,
        ...this.list.pageData.form
      };
      delete params.distributorId
      params.distributorIds = this.list.pageData.form.distributorId
      params.rebateTypeNos = this.list.pageData.form.rebateTypeNos
      params.officeId = this.list.pageData.form.officeId && this.list.pageData.form.officeId.id
      params.yearMonthStart = formatMonth(this.list.pageData.form.yearMonth)
      params.yearMonthEnd = formatMonth(this.list.pageData.form.yearMonth)
      params = clearEmpty(params)
      this.list.pageData.status = 'loading'
      this.$jsonPost('/distributor/rebate/flow/findByQuery', params).then(res => {
        this.list.pageData.status = 'pass'
        this.list.pageData.total = res.total
        this.list.pageData.data = res.records;
        this.list.pageData.loading = false;
      })
    },
    getFlowData(p) {
      if (p && p.type == 'current') this.list.pageData.current = p.val
      if (p && p.type == 'size') this.list.pageData.size = p.val
      this.list.pageData1.loading = true;
      
      let params = {
        current: this.list.pageData1.current,
        size: this.list.pageData1.size,
        ...this.list.pageData1.form
      };
      delete params.distributorId
      params.distributorIds = this.list.pageData1.form.distributorId
      params.rebateTypeNos = this.list.pageData1.form.rebateTypeNos
      params.officeId = this.list.pageData1.form.officeId && this.list.pageData1.form.officeId.id
      params.year = this.list.pageData1.form.year.getFullYear()
      params = clearEmpty(params)
      this.list.pageData1.status = 'loading'
      this.$jsonPost('/distributor/rebate/flow/findRebateFlowDetail', params).then(res => {
        this.list.pageData1.status = 'pass'
        this.list.pageData1.data = res.records;
        this.list.pageData1.loading = false;
      })
    },
    setBranch(row) {
      if (!row) return
      this.list.pageData1.branch = row.children
    },
    setBranchTab(row) {
      this.list.pageData.branch = row.children
    },
    setDistribute(id) {
      this.$store.dispatch('getDistributorDepartment', {departId: id}).then(res=> {
        this.list.pageData1.distributor = res
        this.list.pageData1.form.distributorId = ''
      })
    },
    setDistributeTab(id) {
      this.$store.dispatch('getDistributorDepartment', {departId: id}).then(res=> {
        this.list.pageData.distributor = res
        this.list.pageData.form.distributorId = ''
      })
    },
    getInitCondition() {
      this.$store.dispatch('getListDepartmentTree')
      this.$store.dispatch('getFlowTypeList', {})
      this.$store.dispatch('getCreatorList')
    },
    onImport() {
      this.$refs.importShip.reset()
    },
    onRebate() {
      this.$refs.rebate.reset()
    },
    openDetail(row) {
      this.$router.push({
        name: "report-rebate-edit",
        query: {
          id: row.id,
          title: JSON.stringify(row.title)
        }
      });
      this.$refs.rebateModal.open(row);
    },
    onPageChange(val) {
      this.list.current = val;
      this.getData();
    },
    onPageSizeChange(val) {
      this.list.current = 1;
      this.list.size = val;
      this.getData();
    },
    onSubmit(params) {
      this.list.current = 1;
      this.getData(params);
    },
    setYear() {
      let date = new Date();
      let y = date.getFullYear() + "";
      this.$refs["table-form"].setFormData("year", y);
    },
    onPatrolDetail() {
      this.$router.push({ name: "report/patrol/detail" });
    }
  },
  computed: {
    ...mapGetters([
      'reportDepart',
      'reportFlowTypeList',
      'reportFlowCreatorList'
    ]),
    exportParam() {
      let params = {
        current: this.list.pageData.current,
        size: this.list.pageData.size,
        ...this.list.pageData.form
      };
      delete params.distributorId
      params.distributorIds = this.list.pageData.form.distributorId
      params.rebateTypeNos = this.list.pageData.form.rebateTypeNos
      params.officeId = this.list.pageData.form.officeId && this.list.pageData.form.officeId.id
      params.yearMonthStart = formatMonth(this.list.pageData.form.yearMonth)
      params.yearMonthEnd = formatMonth(this.list.pageData.form.yearMonth)
      params = clearEmpty(params)
      return params
    }
  },
  watch: {
    tab(val) {
      let height = 0
      this.initTable(height)
    }
  }
};
</script>
